<!--装货员端装货记录-->
/* eslint-disable */
<template>
 <el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/index' }">装货员端</el-breadcrumb-item>
   <el-breadcrumb-item>用户管理</el-breadcrumb-item>
 </el-breadcrumb>
 <div class="card_search">
	 
	 <div class="add-btn">
	   <!--      <el-button @click="changeGoodsStatus">开关单</el-button>-->
	   <el-button @click="dialogVisible = true">绑定会员卡</el-button>
	 </div>
   <div class="add-btn">
     <el-select v-model="status" class="max" placeholder="请选择会员卡状态" size="large" 
                @change="selectChange()">
       <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
       />
     </el-select>
   </div>
    <el-input
        v-model="queryInfo.cardAccount"
        class="search"
        size="large"
        placeholder="搜索"
        @blur="getOrderInfo"
		@keyup.enter='getOrderInfo'
    />
    <img src="@/assets/imgs/home/search.png" alt="" @click="getOrderInfo" style="width: 0.4rem; background-color: rgb(57,62,74); cursor: pointer;">
  </div>
  <el-form>
    <el-table
        ref="warRef"
        :data="warList"
        :header-cell-style = "headerStyle"
        :cell-style = "cellStyle"
        class="table"
        @selection-change="handleSelectionChange"
    >
<!--      <el-table-column type="selection"/>-->
      <!-- <el-table-column type="expand" min-width="4%"> -->
        <!-- <template #default="props">

        </template> -->
      <!-- </el-table-column > -->
      <el-table-column property="cardAccount" label="卡号" min-width="17%"/>
	  <el-table-column v-if="queryInfo.status==2||queryInfo.status==-1||queryInfo.status==3" property="name" label="昵称" min-width="17%"/>
	  <el-table-column property="type" label="类型" min-width="17%"/>
	   <el-table-column property="status" label="状态" min-width="17%"/>
	   <el-table-column v-if="queryInfo.status==2||queryInfo.status==-1" property="total" label="剩余次数" min-width="17%"/>
	   <el-table-column v-if="queryInfo.status==2||queryInfo.status==-1" property="contactTelephone" label="手机" min-width="17%"/>
	  <el-table-column v-if="queryInfo.status==2" property="activationTime" label="激活时间" min-width="15%"/>
	  <el-table-column v-if="queryInfo.status==-1" property="thawTime" label="解冻时间" min-width="15%"/>
	  <el-table-column v-if="queryInfo.status==3" property="lastOrderTime" label="最后下单时间" min-width="15%"/>
      <el-table-column v-if="queryInfo.status==2" label="操作" min-width="25%">
        <template #default="scope">
          <el-button type="primary" size='large' @click='suspend(scope.row.cardAccount)' style="border: 1px solid white; background-color: rgb(57,62,74)">暂停</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>

  <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="queryInfo.currentPage"
      :page-size="queryInfo.pageSize"
      class="pagination-container"
  />
<el-dialog
      title="绑定会员卡"
      :model-value="dialogVisible"
      :close-on-click-modal= "false"
      width="50%" @close='conterLog'>
    <el-form 
	:model='cgStatusForm' 
	ref='changeStatusRef'>
      <el-form-item prop="dishesName">
        <span>当前账号</span>
        <el-input v-model="cgStatusForm.user" style="width: 80%"/>
      </el-form-item>
	  <el-form-item prop="dishesName">
	    <span>卡号</span>
	    <el-input v-model="cgStatusForm.card" @change="getCardType"  style="width: 80%"/>
	  </el-form-item>
	  <el-form-item prop="dishesName">
	    <span>卡密</span>
	    <el-input v-model="cgStatusForm.pwd"  style="width: 80%"/>
	  </el-form-item>
	  <el-form-item prop="dishesName">
	    <span>昵称</span>
	    <el-input v-model="cgStatusForm.name"  style="width: 80%"/>
	  </el-form-item>
	  <!-- <el-form-item prop="dishesName">
	    <span>手机号</span>
	    <el-input v-model="cgStatusForm.phone"  style="width: 80%"/>
	  </el-form-item> -->
	  <el-form-item prop="dishesName">
	    <span>选择城市</span>
		<el-form style="width: 80%" :inline="true"  class="demo-form-inline">
			<el-form-item style="width: 20%">
			     <el-select v-model="formInline.province" clearable placeholder="省"  @change="seletekey($event, 'province')">
			            <el-option v-for="(val, key) in provinces" :key="key" :label="val" :value="val" />
			     </el-select>
			</el-form-item>
			<el-form-item style="width: 20%">
			     <el-select v-model="formInline.city" clearable placeholder="市" @change="seletekey($event, 'city')">
			       <el-option v-for="(val, key) in citys" :key="key" :label="val" :value="val" />
			     </el-select>
			</el-form-item>
			<el-form-item  style="width: 20%">
			     <el-select v-model="formInline.area" clearable placeholder="区" @change="seletekey($event, 'area')">
			       <el-option v-for="(val,key) in areas" :key="key" :label="val" :value="val" />
			     </el-select>
			</el-form-item>
		</el-form>
	  </el-form-item>
	  <el-form-item prop="dishesName">
	    <span>详细地址</span>
	    <el-input v-model="cgStatusForm.address" style="width: 80%"/>
	  </el-form-item>
	  <el-form-item prop="dishesName" v-if="oneFlag">
	    <span>送达日期</span>
		<el-select v-model="cgStatusForm.week1" placeholder="送达日期1" style="width: 80%;margin-bottom: 10px;">
		    <el-option
		      v-for="item in optionsWeek"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value"
		    />
		  </el-select>
		  <el-select v-if="typeFlag" v-model="cgStatusForm.week2" placeholder="送达日期2" style="width: 80%">
		      <el-option
		        v-for="item in optionsWeek"
		        :key="item.value"
		        :label="item.label"
		        :value="item.value"
		      />
		    </el-select>
	  </el-form-item>
    </el-form>
      <div class='item_button'>
        <span class="dialog-footer">
          <el-button @click="conterLog">取 消</el-button>
          <el-button type="primary" @click="AddDialog">确 定</el-button>
		  <!-- <el-button type="primary" @click="console.log(cgStatusForm)">确 定</el-button> -->
        </span>
      </div>
  </el-dialog>
</template>

<script setup>
import { pca, pcaa } from 'area-data';
import {reactive, ref, getCurrentInstance, onMounted} from "vue";
import {useRouter} from "vue-router";
import {changeGo, getDetailGo} from "@/service/WarehouseService";
const {proxy} = getCurrentInstance()
const dialogVisible=ref(false)
const cgStatusForm=ref({})
const formInline=ref({})
const status=ref('')
const oneFlag=ref(true)
const isOne=ref(0)
const typeFlag=ref(false)
const pcaaData= pcaa
      // 区域数据
const   provinces=pcaa['86']
const   citys= ref([])
const   areas= ref([])
const isTwo=ref(0)
// 渲染
const total = ref(0)
const queryInfo = reactive({
  cardAccount:'',
  status:'',
  date:'',
  currentPage:1,
  pageSize:8
})
const optionsWeek = [
  {
    value: '2',
    label: '周一',
  },
  {
    value: '3',
    label: '周二',
  },
 {
   value: '4',
   label: '周三',
 },
 {
   value: '5',
   label: '周四',
 },{
    value: '6',
    label: '周五',
  },
  {
    value: '7',
    label: '周六',
  },{
    value: '1',
    label: '周日',
  },
 
]
const options = reactive([
	{label: '全部', value: ''},
		{label: '冻结', value: '-1'},	
	 {label: '未发出', value: '0'},
	{label: '已发出', value: '1'},
	{label: '已绑定未下单', value: '4'},
	{label: '正常使用', value: '2'},
	{label: '已失效', value: '3'},
])
// 装配完成的订单
const warList = reactive([])
const router = useRouter()
let order = reactive([])
// 渲染
onMounted(() => {
  getBuyOrder()
})
// 修改el-table默认样式
const headerStyle = () => {
  return {
    'font-size':'20px',
    'color': 'black',
    'text-align': 'center'
  }
}

const cellStyle = () => {
  return {
    'background-color':'rgb(57,62,74)',
    'color': 'white',
    'text-align': 'center'
  }
}

const headerStyleSon = () => {
  return {
    'font-size':'16px',
    'color': 'black',
    'text-align': 'center',
    'margin-top': '-50px !important'
  }
}

const cellStyleSon = () => {
  return {
    'background-color':'rgb(0,152,131)',
    'color': 'white',
    'text-align': 'center'
  }
}

// table选择变化
const handleSelectionChange = val => {
  order = val
}

// 获取所有status为已截单的订单
const getBuyOrder = async () => {
	// console.log(queryInfo);
  const {data: res} = await proxy.$http.User.getCard(queryInfo)
  if (res.code !== 200) return proxy.$message.error('获取会员卡数据失败')
  console.log(res);
  warList.length = 0
 for(let i=0 ;i<res.data.records.length;i++){
	 if(res.data.records[i].status==2||res.data.records[i].status==-1||res.data.records[i].status==3){
		 if(res.data.records[i].activationTime!=null){
			  res.data.records[i].activationTime=res.data.records[i].activationTime.slice(0,11)
		 }
		if(res.data.records[i].thawTime!=null){
			res.data.records[i].thawTime=res.data.records[i].thawTime.slice(0,11)
		}
		if(res.data.records[i].lastOrderTime!=null){
			res.data.records[i].lastOrderTime=res.data.records[i].lastOrderTime.slice(0,11)
		}
		
	 }
	 if(res.data.records[i].total!=0){
	 switch(res.data.records[i].status){
		 case -1:res.data.records[i].status="冻结";break;
		 case 0:res.data.records[i].status="未发出";break;
		 case 1:res.data.records[i].status="已发出";break;
		 case 2:
			if(res.data.records[i].warn){
				res.data.records[i].status = '已绑定未下单';
			}else{
				res.data.records[i].status = '正常使用';
			}
			break;
		 case 3:res.data.records[i].status="已失效";break;
	 }
	 }else{
		 res.data.records[i].status="已失效";
	 }
	  warList.push(res.data.records[i])
 }
 total.value=res.data.total
}

// 根据分页器切换每页的菜品
const handleCurrentChange = val => {
  queryInfo.currentPage = val
  getBuyOrder()
}
// 搜索卡号
const getOrderInfo = () => {
	
  getBuyOrder()
}
// 暂停会员卡
const suspend=async (id)=>{
	const {data: res} = await proxy.$http.User.stopGo({cardAccount:id})
	if (res.code != 200) {
		 proxy.$message.error('暂停会员卡失败')
	}else{
		 proxy.$message.success('暂停会员卡成功')
	}
	getBuyOrder()
}
// 搜索卡号
const selectChange=()=>{
	// console.log(queryInfo.status);
	// console.log(status.value)
	queryInfo.warn=null
	queryInfo.status=status.value
	if(status.value=='4'){
		queryInfo.status='2'
		queryInfo.warn='first'
	}
	getBuyOrder()
}
// 取消关闭弹窗
const conterLog=()=>{
	cgStatusForm.value={}
	formInline.value={}
	dialogVisible.value=false
}
//添加对话框
const AddDialog=async ()=>{
	const addressList=formInline.value.province+formInline.value.city
	+formInline.value.area+cgStatusForm.value.address
	const ss={
		addressDTO:{
			address:addressList,
			receiver:cgStatusForm.value.name,
			telephone:cgStatusForm.value.user
		},
		cardAccount:cgStatusForm.value.card,
		contactTelephone:cgStatusForm.value.user,
		password:cgStatusForm.value.pwd,
		// week:cgStatusForm.value.week1
	}
	if(isTwo.value==0){
		ss.isTwo=isTwo.value,
		ss.week=cgStatusForm.value.week1
	}else{
		ss.isTwo=isTwo.value,
		ss.weeks={}
		ss.weeks.aWeek=cgStatusForm.value.week1
		ss.weeks.bWeek=cgStatusForm.value.week2
	}
	if(isOne.value==1){
		delete ss.isTwo
		delete ss.week
	}
	const {data: res} = await proxy.$http.User.getUser(ss)
	console.log(res);
	if (res.code !== 200) return proxy.$message.error('获取会员卡数据失败')
	else{
		dialogVisible.value=false
		return proxy.$message.success('绑卡成功') 
	} 
}
const seletekey=(e, type)=> {
      if (e) {
        switch (type) {
          case 'province':
            Object.keys(provinces).filter(item => {
              if (provinces[item] === e) {
                citys.value = pcaaData[item]
              }
            })
            break
          case 'city':
            Object.keys(citys.value).filter(item => {
              if (citys.value[item] === e) {
				areas.value = pcaaData[item]
              }
            })
            break
          case 'area':
            break
        }
      }
    }
const getCardType= async (e)=>{
	oneFlag.value=true
	const {data: res} = await proxy.$http.User.getType({cardAccount:e})
	if (res.code !== 200) return proxy.$message.error('获取会员卡数据失败')
	 if (res.data !== null && res.data.type === "至尊VIP会员卡") {
	        typeFlag.value=true
			isTwo.value=1
	}else{
		typeFlag.value=false
		isTwo.value=0
	}
	if (res.data.type === "10斤大米礼盒装兑换卡" || res.data.type === "20斤大米提货卡"|| res.data.type === "两无化蔬菜单次卡A"|| res.data.type === "两无化蔬菜单次卡B"){
		oneFlag.value=false
		isOne.value=1
	}
}
</script>

<style scoped lang="scss">
.search{
  width: 25%;
}
.card_search{
  margin-top: 10px;
  display: flex;
  justify-content: right;
}

.add-btn {
  height: 40px;
  display: flex;
  margin-right: 50px;
  .el-button {
    font-size: 0.15rem;
    font-weight: bolder;
    background-color: rgb(0,152,131);
    height: 100%;
    color: white;
  }
  .el-button:hover {
    background-color: white;
    color: rgb(0,152,131);
  }
  .el-input-bg-color {
    background-color: #409EFF;
  }
  :deep(.el-input__inner) {
    // background-color: rgb(0,152,131);
    &::placeholder{
      color: white;
      font-weight: bolder;
      font-size: 16px
    }
  }
  :deep(.el-select .el-input .el-select__caret) {
    color: white;
  }
}

:deep(.search .el-input__wrapper) {
  background-color: rgb(0,152,131)
}

:deep(.add-btn .el-input__wrapper) {
  background-color: rgb(0,152,131)
}

:deep(.search .el-input__inner) {
  color: white
}

.card_search {
  :deep(.el-input__inner) {
    color: white;
    &::placeholder{
      color: white;
      font-size: 16px
    }
  }
}

:deep(.search .el-icon) {
  color: white;
}


.search_date {
  display: flex;
  margin-right: 50px;
}

.table {
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding-top: 50px;
}
.divSon {
  font-weight: bolder;
  font-size: 20px;
}
.tableSon {

}
:deep(.el-table__body) {
  border-collapse: separate;
  border-spacing: 0 20px;
}
:deep(.el-table__body .el-button){
  border: 1px solid white;
  background-color: rgb(0,152,131);
}
:deep(.el-table__body .el-button:hover){
  color: rgb(0,152,131);
  background-color: white !important;
}
:deep(.el-table__body .el-table__expand-icon){
  color: white;
}

.sub_form {
  .item_form {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    p {
      height: 100%;
      line-height: 35px;
    }
    .el-input {
      width: 80%;
    }
  }
}

.good_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  dl {
    width: 150px;
    height: 150px;
    padding: 10px 25px;
    box-sizing: border-box;
    margin-left: 26px;
    margin-top: 20px;
    border: 2px solid rgba(75,66,49,0.8);
    dt{
      width: 100px;
      height: 100px;
      img {
        width: 100%;
      }
    }
    dd{
      height: 20px;
      width: 100px;
      margin-top: 10px;
      text-align: center;
    }
  }
}

.el-pagination{
  position: absolute;
  right: 8%;
  bottom: 2%
}

.item_button {
  margin-top: 15px;
}
:deep(.el-form-item__content){
	justify-content: flex-end !important;
	span{
		margin-right: 20px;
	}
}
:deep(.el-input__suffix){
	margin-right: 0 !important;
}
</style>
